<template>
    <div class="common-echart-box"  >
      <div class="common-echart" :id="id"></div>
    </div>
    
  </template>
  <script setup>
  import * as echarts from "echarts";
  import {onMounted, onUnmounted, reactive, watch} from "vue";
  import {ElMessage } from 'element-plus';
  //传入参数
  const props=defineProps({
    loading:{
      type:Boolean,
     },
    id:{
      type: String,
      default:''
    },
    title:{
      type: String,
      default:''
    },
    titleObj:{
      type: Object,
      default:null
    },
    grid:{
      type: Object,
      default:null
    },
    tooltip:{
      type: Object,
      default:null
    },
    xAxis:{
      type: Object,
      default:null
    },
    yAxis:{
      type: Object,
      default:null
    },
    xData:{
      type:Array,
      default:()=>{
        return []
      }
    },
    type:{
      type:String,
      default:"line"
    },
    series:{
      type:Array,
      default:null
    },
    dataset:{
      type:Object,
      default:null
    }
  })
  let myEchart = null
// 折线图所需要的数据
 //数据
let dataList = reactive({
dataX : [
  "XX街道",
  "XX街道",
  "XX街道",
  "XX街道",
  "XX街道",
  "XX街道",
  "XX街道",
  "XX街道",
  "XX街道",
  "XX街道",
  "XX街道",
  "XX街道",
  "XX街道",
  "XX街道",
  "XX街道",
  "XX街道",
  "XX街道",
  "XX街道",
], //名称
dataY : [
  20, 50, 15, 35, 50, 30, 40, 50, 60, 20, 50, 15, 35, 50, 30, 40, 50, 60,
], //数据
zoomShow : false,
})
const handleData = ()=>{
    if (dataList.dataY.length > 14) {
        dataList.zoomShow = true;
        console.log(dataList.zoomShow,'if---dataList.zoomShow')
    } else {
        dataList.zoomShow = false;
        console.log(dataList.zoomShow,'else--dataList.zoomShow')
}
}
let barOption = {
  backgroundColor: "#0D2753",
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    top: "10%",
    right: "5%",
    left: "5%",
    bottom: "10%",
  },
  xAxis: [
    {
      type: "category",
      data: dataList.dataX,
      axisLine: {
        lineStyle: {
          color: "rgba(66, 192, 255, .3)",
        },
      },
      axisLabel: {
        interval: 0,
        margin: 10,
        color: "#05D5FF",
        textStyle: {
          fontSize: 11,
        },
        rotate: "45",
      },
      axisTick: {
        //刻度
        show: false,
      },
    },
  ],
  yAxis: [
    {
      axisLabel: {
        padding: [3, 0, 0, 0],
        formatter: "{value}",
        color: "rgba(95, 187, 235, 1)",
        textStyle: {
          fontSize: 11,
        },
      },
      axisTick: {
        show: true,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(66, 192, 255, .3)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,0)",
        },
      },
    },
  ],
  dataZoom: [
    //滚动条
    {
      
      type: "slider",
      realtime: true,
      startValue: 0,
      endValue: 14,
      xAxisIndex: [0],
      bottom: "10",
      left: "30",
      height: 10,
      borderColor: "rgba(0,0,0,0)",
      textStyle: {
        color: "#05D5FF",
      },
    },
  ],
  series: [
    {
      type: "bar",
      data: dataList.dataY,
      barWidth: "10",
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(5, 213, 255, 1)", // 0% 处的颜色
              },
              {
                offset: 0.98,
                color: "rgba(5, 213, 255, 0)", // 100% 处的颜色
              },
            ],
            false
          ),
          shadowColor: "rgba(5, 213, 255, 1)",
          shadowBlur: 4,
        },
      },
      label: {
        normal: {
          show: true,
          lineHeight: 10,
          formatter: "{c}",
          position: "top",
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
        },
      },
    },
  ],
};
  onMounted(()=>{
    handleData()
    if(!props.id){
        ElMessage.error('请传入echarts元素ID')
      return
    }
    let chartDom=document.getElementById(props.id)
    if(!myEchart){
      //(dom,theme)  purple-passion：主题
      myEchart=echarts.init(chartDom)
    }
    setOptions()
    //resize监听
    window.addEventListener('resize', resizeChange)
  })
  onUnmounted(() => {
    //图表销毁
    echarts.dispose;
    //注销监听
    window.removeEventListener('resize', resizeChange)
  });
  //图表数据填充
  const setOptions=()=>{
    //折线图-柱状图
    if(props.type=='line'||props.type=='bar'&&props.series){
      if(props.titleObj){
        barOption.title=props.titleObj
      }
      myEchart.setOption(barOption)
    }
  }
  const resizeChange=()=>{
    myEchart.resize()
  }
  watch(()=>props.series,(newValue, oldValue)=>{
    setOptions()
  })
  watch(()=>props.dataset,(newValue, oldValue)=>{
    setOptions()
  })
  </script>
  <style scoped>
  .common-echart-box{
    width:500px;
    height:500px;
  }
  .common-echart{
    width:100%;
    height:100%;
  }
  </style>